<template>
    <view class="flex-card">
      <view class="flex-item">
        <label>{{title}}</label>
        <view>
          <text>{{value}}</text>
        </view>
      </view>
      <view class="item-detail-view" v-if="isCompare">
        <text class="item-text">{{label2}}</text>
        <view class="label-view">
          <text class="item-text item-text-detail">{{value2}}</text>
          <!-- <text v-if="value2 !== '--'" :class="up2 ? 'extra_up' : 'extra_down'">{{up2 ? '&#xe649;' : '&#xe64c;'}}</text> -->
          <eui-uicons style="margin-top: 10rpx;" v-if="value2 !== '--'" size='20' fontFamily="enjoyIcon5" :customPrefix="up2 ? 'icon-shuju-shangsheng' : 'icon-shuju-xiajiang'" :color="up2 ? '#FF4000' : '#00AD60'" />
        </view>
      </view>
      <view class="item-detail-view" v-if="isCyclic">
        <text class="item-text">{{label3}}</text>
        <view class="label-view">
          <text class="item-text item-text-detail">{{value3}}</text>
          <eui-uicons style="margin-top: 10rpx;" v-if="value3 !== '--'" size='20' fontFamily="enjoyIcon5" :customPrefix="up3 ? 'icon-shuju-shangsheng' : 'icon-shuju-xiajiang'"  :color="up3 ? '#FF4000' : '#00AD60'"/>
          <!-- <text v-if="value3 !== '--'" :class="up3 ? 'extra_up' : 'extra_down'">{{up3 ? '&#xe649;' : '&#xe64c;'}}</text> -->
        </view>
      </view>
      <view class="item-detail-view" v-if="isCompareType">
        <text class="item-text">{{label4}}</text>
        <view class="label-view">
          <text class="item-text item-text-detail">{{value4}}</text>
          <eui-uicons style="margin-top: 10rpx;" v-if="value4 !== '--'" size='20' fontFamily="enjoyIcon5" :customPrefix="up4 ? 'icon-shuju-shangsheng' : 'icon-shuju-xiajiang'"  :color="up4 ? '#FF4000' : '#00AD60'"/>
        </view>
      </view>
      <view class="item-detail-view" v-if="label5">
        <text class="item-text">{{label5}}</text>
        <view class="label-view">
          <text class="item-text item-text-detail">{{value5}}</text>
        </view>
      </view>
    </view>
  </template>
  
  <script setup type="ts">
  import { ref, defineProps, watch } from 'vue';
  
  const title = ref('');
  const value = ref('');
  const label2 = ref('');
  const value2 = ref('');
  const up2 = ref(false);
  const label3 = ref('');
  const value3 = ref('');
  const up3 = ref(false);
  const label4 = ref('');
  const value4 = ref('');
  const up4 = ref(false);
  const label5 = ref('');
  const value5 = ref('');
  const flexItemStyle = ref('flex-direction: row; display: flex; align-items: start;');
  
  const props = defineProps({
    data: {
      type: Object,
      default: null,
    },
    isCompare: {
      type: [Boolean, String],
      default: true
    },
    isCyclic: {
      type: [Boolean, String],
      default: false
    },
    isCompareType: {
      type: [Boolean, String],
      default: false
    },
  });
  
  const setDefault = (data) => {
    const { title: t, value: v, label2: l2, value2: v2, up2: u2, label3: l3, value3: v3, up3: u3, label4: l4, value4: v4,up4: u4, label5: l5, value5: v5 } = data;
    title.value = t;
    value.value = v;
    label2.value = l2;
    value2.value = v2;
    up2.value = u2;
    label3.value = l3;
    value3.value = v3;
    up3.value = u3;
    label4.value = l4;
    value4.value = v4;
    up4.value = u4;
    label5.value = l5;
    value5.value = v5;
  };
  
  watch(
      () => props.data,
      (newData) => {
        setDefault(newData);
      },
      {
        immediate: true,
        deep: true,
      }
  )
  
  </script>
  
  <style lang="scss" scoped>
  @import '../../../main.scss';
  @import '../../../static/font/enjoyicon5.0/iconfont.css';
  
  .item-detail-view {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 超出显示省略号 */
  }
  .item-text {
    font-family: $uni-font-family;
    font-weight: $uni-font-weight-level1;
    font-size: $uni-font-size-level4;
    color: $uni-text-color-hint;
    line-height: 37rpx;
    text-align: left;
    font-style: normal;
    margin-right: 16rpx;
  }
  
  .item-text-detail {
    color: $uni-text-color-primary;
    text-align: left;
  }
  
  .flex-card {
    padding: 20rpx 0;
    border-top: 1px solid rgba(30, 30, 30, 0.1);
    display: flex;
    flex: 0 0 50%;
    flex-direction: column;
    justify-content: space-between;
  
    .flex-item {
      display: flex;
      flex-direction: column;
  
      label {
        color: #626262;
        font-size: 0.9rem;
        margin: 0;
        padding: 0;
        line-height: 1rem;
      }
  
      text {
        font-size: 0.9rem;
        margin-left: 10rpx;
      }
  
      .extra_down {
        color: greenyellow;
      }
  
      .extra_up {
        color: red;
      }
    }
  
    .flex-item:first-child {
      label {
        font-weight: bold;
        font-size: 0.9rem;
      }
  
      text {
        font-size: 38rpx;
        font-weight: bold;
        margin-left: 0;
      }
    }
  }
  .label-view {
    display: flex;
    flex: 1;
    flex-direction: row;
  }
  
  .extra_down {
    color: greenyellow;
  }
  
  .extra_up {
    color: red;
  }
  
  .flex-card:first-child, .flex-card:nth-child(2) {
    border-top: none;
  }
  
  .flex-card:last-child {
    border-bottom: none;
  }
  </style>
  